<template>
  <a-drawer
    v-model:visible="vdata.visible"
    title="自主签约"
    width="50%"
    @close="onClose"
  >
    <a-form>
      <template v-if="vdata.bizSignInfo && (vdata.bizSignInfo.state || vdata.bizSignInfo.signUrl)">
        <a-divider orientation="left" style="color: #1A66FF;">电子合同签约</a-divider>

        <a-form-item label="签约状态">
          {{ vdata.bizSignInfo.state || '异常[' + vdata.bizSignInfo.errInfo + ']' }}
          <a-button :loading="vdata.bizSignInfoBtnLoading" size="small" style="margin-left: 20px;" type="primary" @click="getMchApplymentChannelSignInfoFunc"><reload-outlined />刷新</a-button>
        </a-form-item>

        <a-form-item v-if="vdata.bizSignInfo.signUrl" label="合同地址">
          <p style="margin-top: 5px;"><a :href="vdata.bizSignInfo.signUrl" target="_blank">{{ vdata.bizSignInfo.signUrl }}</a></p>

          <p style="margin-top: 20px;">合同地址快捷访问二维码：</p>
          <QrcodeVue :value="vdata.bizSignInfo.signUrl" :size="150" class="qrcode" />
        </a-form-item>
      </template>

      <template v-if="vdata.wxOpenInfo && (vdata.wxOpenInfo.state || vdata.wxOpenInfo.signUrl)">
        <a-divider orientation="left" style="color: #1A66FF;">微信开户意愿确认</a-divider>

        <a-form-item label="商户确认状态">
          {{ vdata.wxOpenInfo.state || '异常[' + vdata.wxOpenInfo.errInfo + ']' }}
          <a-button :loading="vdata.wxOpenInfoBtnLoading" size="small" style="margin-left: 20px;" type="primary" @click="getMchApplymentWxOpenInfoFunc"><reload-outlined />刷新</a-button>
        </a-form-item>

        <a-form-item v-if="vdata.wxOpenInfo.signUrl" label="">
          <p>商户联系人使用已绑定银行卡的微信扫下面的二维码:</p>
          <QrcodeVue v-if="vdata.wxOpenInfo.imgType == 'qrContent'" :value="vdata.wxOpenInfo.signUrl" :size="150" class="qrcode" />
          <img v-else :src="'data:image/jpg;base64,' + vdata.wxOpenInfo.signUrl" class="qrcode" style="width: 200px">
          <br>
          <p class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</p>
        </a-form-item>
      </template>

      <template v-if="vdata.alipayOpenInfo.state || vdata.alipayOpenInfo.signUrl">
        <a-divider orientation="left" style="color: #1A66FF;">支付宝实名审核</a-divider>

        <a-form-item label="商户确认状态">
          {{ vdata.alipayOpenInfo.state }}
          <a-button :loading="vdata.alipayOpenInfoBtnLoading" size="small" style="margin-left: 20px;" type="primary" @click="getMchApplymentAlipayOpenInfoFunc"><reload-outlined />刷新</a-button>
        </a-form-item>
        <br>
        <span v-if="vdata.alipayOpenInfo.errInfo">{{ '异常[' + vdata.alipayOpenInfo.errInfo + ']' }}</span>

        <a-form-item v-if="vdata.alipayOpenInfo.signUrl" label="">
          <p>商户联系人使用已绑定银行卡的支付宝扫下面的二维码:</p>
          <QrcodeVue v-if="vdata.alipayOpenInfo.imgType == 'qrContent'" :value="vdata.alipayOpenInfo.signUrl" :size="150" class="qrcode" />
          <template v-else>
            <img v-if="vdata.alipayOpenInfo.signUrl && vdata.alipayOpenInfo.signUrl.indexOf('http') == 0" :src="vdata.alipayOpenInfo.signUrl" class="qrcode" style="width: 200px"> 
            <img v-else :src="'data:image/jpg;base64,' + vdata.alipayOpenInfo.signUrl" class="qrcode" style="width: 200px">
          </template>
          <br>
        <!-- <p class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</p> -->
        </a-form-item>
      </template>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { $getMchApplymentChannelSignInfo, $getMchApplymentWxOpenInfo, $getMchApplymentAlipayOpenInfo } from '@/api/manage'
import {reactive, getCurrentInstance} from 'vue'
import QrcodeVue from 'qrcode.vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


const vdata : any = reactive({
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉

  bizSignInfo: {}, // 电子合同信息

  wxOpenInfo: {}, // 微信开户意愿信息
  alipayOpenInfo: {}, // 支付宝开户意愿信息


  bizSignInfoBtnLoading: false,
  wxOpenInfoBtnLoading: false,
  alipayOpenInfoBtnLoading: false,

})

function show (recordId) { // 弹层打开事件
  
  // 数据的清空
  vdata.bizSignInfo = {}
  vdata.wxOpenInfo = {}
  vdata.alipayOpenInfo = {}

  vdata.recordId = recordId
  getMchApplymentChannelSignInfoFunc()
  getMchApplymentWxOpenInfoFunc()
  getMchApplymentAlipayOpenInfoFunc()
  vdata.visible = true

}


// 电子合同状态查询
function getMchApplymentChannelSignInfoFunc(){
  vdata.bizSignInfoBtnLoading = true
  $getMchApplymentChannelSignInfo(vdata.recordId).then(res => {
     vdata.bizSignInfo = res
  }).finally(() => {
    vdata.bizSignInfoBtnLoading = false
  })
}

// 电子合同状态查询
function getMchApplymentWxOpenInfoFunc(){
  vdata.wxOpenInfoBtnLoading = true
  $getMchApplymentWxOpenInfo(vdata.recordId).then(res => {
     vdata.wxOpenInfo = res
  }).finally(() => {
    vdata.wxOpenInfoBtnLoading = false
  })
}

// 电子合同状态查询
function getMchApplymentAlipayOpenInfoFunc(){
  vdata.alipayOpenInfoBtnLoading = true
  $getMchApplymentAlipayOpenInfo(vdata.recordId).then(res => {
     vdata.alipayOpenInfo = res || {}
  }).finally(() => {
    vdata.alipayOpenInfoBtnLoading = false
  })
}


function onClose () {
  vdata.visible = false
}


defineExpose({ show })
</script>
<style scoped>

.form-item-content{
  width: 70%
}

</style>